<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<input type="text" placeholder="请输入歌名..." class="txt" v-model="iptvalue" @focus="switchSearch">
				<template v-if="isBtn">
					<view class="btn" @click="search">搜索</view>
				</template>
				<template v-else>
					<view class="btn" @click="cancel">取消</view>
				</template>
			</view>
		</view>
		<template v-if="isSearch">
			<view class="searchhot" v-if="isok">
				<view class="songitem" v-for="(item, index) in songlist" :key="index" @click="songs(item.id)">
					<view class="left">
						<image class="img" :src="item.artists[0].img1v1Url" lazy-load="ture"></image>
					</view>
					<view class="center">
						<view class="title">{{ item.name }}</view>
						<view class="info">{{ item.artists[0].name }} - {{ item.album.name }}</view>
					</view>
					<view class="right">
						播放
					</view>
				</view>
			</view>
			<view class="searchsonglist" v-else>
				<view class="songitem" v-for="(item, index) in detaillist" :key="index" @click="songhot(item.searchWord)">
					<view class="searchWord">
						<!-- <image :src="item.iconUrl" mode=""></image> -->
						{{ item.searchWord }}
					</view>
					<view class="content">
						{{ item.content }}
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="banner">
				<view class="uni-padding-wrap">
				                <view class="page-section-spacing">
				                    <swiper
														class="swiper"
														:indicator-dots="indicatorDots"
														:autoplay="autoplay"
														:interval="interval"
														:duration="duration"
														circular="ture"
														>
				                        <swiper-item v-for="(item,index) in pic" :key="index" class="swiper-item">
				                            <image :src="item.pic" mode=""></image>
				                        </swiper-item>
				                    </swiper>
				                </view>
				        </view>
			</view>
			<view class="nav">
				<view class="nav-item" @click="recommend">
					<text class="icon">&#xe67c;</text>
					<text class="nav-txt">推荐</text>
				</view>
				<view class="nav-item" @click="singer">
					<text class="icon">&#xe603;</text>
					<text class="nav-txt">歌手</text>
				</view>
				<view class="nav-item" @click="songSheet">
					<text class="icon">&#xe60d;</text>
					<text class="nav-txt">歌单</text>
				</view>
				<view class="nav-item" @click="ranking">
					<text class="icon">&#xe67b;</text>
					<text class="nav-txt">排行榜</text>
				</view>
			</view>
			<view class="hot-mic">
				<text class="hot-title">今日热歌</text>
					<view class="music-item" v-for="(item, index) in MusicList" :key="index" @click="song(item.id)">
						<view class="left">
							<image class="img" :src="item.picUrl" lazy-load="ture"></image>
						</view>
						<view class="center">
							<view class="title">{{ item.name }}</view>
							<view class="info">{{ item.song.artists | forartists }} - {{ item.song.album.name }}</view>
						</view>
						<view class="right">
							播放
						</view>
					</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				MusicList:[],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				pic: [],
				songlist: [],
				detaillist: [],
				isok: false,
				isSearch:false,
				isBtn: true,
				stop: false,
				iptvalue: ''
				
			}
		},
		onLoad() {
		this.getMusicList()
		this.getpic()
		this.getdetail()
		},
		filters:{
			forartists(value){
				const arr =value.map(item=>item.name)
				return arr.join('/')
			}
		},
		methods: {
			getMusicList(){
				uni.request({
					url:'http://134.175.83.178:3000/personalized/newsong',
					success: (res) => {
						const { data } = res
						// console.log(data)
						this.MusicList = data.result
					}
				})
			},
			
			songs(id){
				// console.log(id)
				uni.navigateTo({
					url: `/pages/song/song?id=${id}`
				});
			},
			
			getpic(){
				uni.request({
					url:'http://134.175.83.178:3000/banner?type=1',
					success: (res) => {
						const { data } = res
						// console.log(data)
						this.pic = data.banners
					}
				})
			},
			
			recommend(){
				uni.navigateTo({
					url:'/pages/recommend/recommend'
				})
			},
			
			singer(){
				uni.navigateTo({
					url:"/pages/singer/singer"
				})
			},
			
			songSheet(){
				// console.log(22)
				uni.navigateTo({
					url:"/pages/songSheet/songSheet"
				})
			},
			
			ranking(){
				uni.navigateTo({
					url:"/pages/ranking/ranking"
				})
			},
			
			getdetail(){
				uni.request({
					url:`http://134.175.83.178:3000/search/hot/detail`,
					method:'GET',
					success: (res) => {
						// console.log(res)
						const { data } = res
						this.detaillist = data.data
					}
				})
			},
			search(){
				uni.request({
					url:`http://134.175.83.178:3000/search?keywords=${this.iptvalue}`,
					method:'GET',
					success: (res) => {
						const { data } = res
						// console.log(data)
						this.songlist = data.result.songs
					}
				})
				this.isok = true
				this.isBtn = false
			},
			
			cancel(){
				this.isBtn = true
				this.isSearch = false
				this.iptvalue = ''
			},
			
			song(id){
				// console.log(id)
				uni.navigateTo({
					url: `/pages/song/song?id=${id}`
				});
			},
			
			songhot(value){
				uni.request({
					url:`http://134.175.83.178:3000/search?keywords=${value}`,
					method:'GET',
					success: (res) => {
						// console.log(res)
						const { data } = res
						this.songlist = data.result.songs
					}
				})
				this.isok = true
			},
			
			switchSearch(){
				this.isSearch = true
				this.isBtn = true
			},
			
			showtop(scrollTop){
				if(scrollTop >= 400) {//当屏幕滚动到距顶部大于400时显示回到顶部按钮
					this.stop = true
				} else {
					this.stop = false  //当屏幕滚动到距顶部小于400时影藏回到顶部按钮
				}
			}
			
			// bottomMore(){
			// 	this.limit = this.limit ++	//页码加一
			// 	uni.request({
			// 		url:`http://134.175.83.178:3000/mv/exclusive/rcmd?limit=${limit}`,
			// 		method:"GET",
			// 		success:(res) => {
			// 			const { data } = res 
			// 			// console.log(data)
			// 			this.exclusivelist = [...this.exclusivelist,...data.data]//新增数据加到原数组后面
			// 		}
			// 	})
			// 	this.loading = false//隐藏加载中
			// }
			
		},
		
		onPageScroll(obj){//滚动条监听事件
			// console.log(obj.scrollTop)
			this.showtop()
		},
		
		// onReachBottom(obj){		//监听上拉到底部函数
		// 	this.bottomMore()
		// 	this.loading = true//显示加载中
		// }
		
	}
</script>

<style>
.content{
	height: 100%;
}
.header{
	height: 76rpx;
	background: #C8C7CC;
}
.search{
	padding: 0 30rpx;
	position: relative;
	height: 76rpx;
	width: 100%;
}
.swiper-item{
	width: 100%;
}
.swiper-item image{
	width: 100%;
}
.txt{
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 10rpx;
	background: #fff;
	height: 70rpx;
	width: 88%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.btn{
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	position: absolute;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
}
.nav{
	display: flex;
	width: 100%;
	justify-content: space-around;
	padding: 10rpx 0;
	border-bottom: #eee 1rpx solid;
}
.nav-item{
	display: flex;
	flex-direction: column;
	align-items: center;
}
	
.nav-txt{
	font-size: 28rpx;
}
.hot-title{
	padding: 20rpx 20rpx;
	display: block;
}
.music-item{
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx 20rpx 20rpx;
}
.left{
	width: 20%;
}
.left .img{
	width: 100%;
	height: 100%;
	
}
.center{
	width: 60%;
}
.info{
	font-size: 26rpx;
	color: #555;
}
.right{
	float: right;
}

</style>
